<template>
  <div class="login-container">
    <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
      <h3 class="title">票务管理系统</h3>
      <el-form-item prop="username">
        <span>
          <svg-icon icon-class="user" />帐号
        </span>
        <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="username" />
      </el-form-item>
      <el-form-item prop="password">
        <span>
          <svg-icon icon-class="password"></svg-icon>密码
        </span>
        <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
          placeholder="password"></el-input>
          <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
      </el-form-item>
      <el-form-item>
        <el-row>
          <el-col :span="12">
            <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
          </el-col>
          <el-col :span="12">
            <el-button type="info" style="width:100%;" :loading="loading" @click.native.prevent="handleRegist">注册</el-button>
          </el-col>
        </el-row>

      </el-form-item>
    </el-form>

    <el-dialog title="注册帐号" :visible.sync="dialogFormVisible">

      <el-form :model="form">
        <el-form-item label="帐号" :label-width="formLabelWidth">
          <el-input v-model="form.account"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.pass"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth">
          <el-input v-model="form.passconfirm"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-select v-model="form.role" clearable placeholder="请选择">
            <el-option
              v-for="item in typeoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btn_register_cancel">取 消</el-button>
        <el-button type="primary" @click="btn_register_submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: 'login',
    data() {
      return {
        typeoptions: [{
          value: '厂牌',
          label: '厂牌'
        }, {
          value: '乐队',
          label: '乐队'
        }, {
          value: '场地方',
          label: '场地方'
        }],
        loginForm: {
          username: 'admin',
          password: 'admin'
        },
        loginRules: {
          username: [{ required: true }],
          password: [{ required: true }]
        },
        loading: false,
        pwdType: 'password',
        dialogFormVisible: false,
        formLabelWidth: '200px', // 弹出框form宽
        form: {
          account: '',
          pass: '',
          passconfirm: '',
          name: '',
          phone: '',
          role: ''
        }
      }
    },
    methods: {
      showPwd() {
        if (this.pwdType === 'password') {
          this.pwdType = ''
        } else {
          this.pwdType = 'password'
        }
      },
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          this.loading = true
          this.$store.dispatch('Login', this.loginForm).then(() => {
            this.loading = false
            this.$router.push({ path: '/' })
          }).catch(() => {
            this.loading = false
          })
        })
      },
      handleRegist() {
        this.dialogFormVisible = true
      },
      btn_register_cancel() {
        this.dialogFormVisible = false
      },
      btn_register_submit() {
        if (this.form.account === '' || this.form.account === undefined) {
          this.$message.error('请输入账号，账号不能为空')
          return
        }
        if (this.form.role === '' || this.form.role === undefined) {
          this.$message.error('请输入角色，角色不能为空')
          return
        }
        const vm = this
        var params = new URLSearchParams()
        params.append('account', vm.form.account)
        params.append('pass', vm.form.pass)
        params.append('passconfirm', vm.form.passconfirm)
        params.append('name', vm.form.name)
        params.append('phone', vm.form.phone)
        params.append('role', vm.form.role)

        axios.post(process.env.BASE_API + '/user/register', params).then(function(response) {
          var obj = response.data
          if (obj.code !== 10000) {
            vm.$message.error(obj.message)
          } else {
            vm.$message(obj.message)
          }
        }).catch(function(error) {
          alert(error)
        })

        this.clearForm()
        this.dialogFormVisible = false
      },
      clearForm() {
        this.form.account = ''
        this.form.pass = ''
        this.form.passconfirm = ''
        this.form.name = ''
        this.form.phone = ''
        this.form.role = ''
      }
    }
}
</script>



<style scoped>

.login-form {
  position: absolute;
  left: 0;
  right: 0;
  width: 520px;
  padding: 35px 35px 15px 35px;
  margin: 120px auto;
}

.title {
  font-size: 26px;
  font-weight: 400;
  margin: 0px auto 40px auto;
  text-align: center;
  font-weight: bold;
}
.show-pwd {
  position: absolute;
  right: 10px;
  top: 7px;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
}
</style>
